<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="demo">
        <ph-list title="demo1" flex="0 0 auto">
          <ph-list-item class="item">
            <div class="demo1">
              这是默认的样式
            </div>
            <ph-back-top :right="getRight(20)" :bottom="20"></ph-back-top>
          </ph-list-item>
        </ph-list>
        <ph-list title="demo02" flex="0 0 auto">
          <ph-list-item class="item">
            <div class="demo2">
              自定义的样式
            </div>
            <ph-back-top :right="getRight(20)" :bottom="20">
              <svg fill="#409eff" t="1630326603877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2028" width="20" height="20"><path d="M300.8 704 192 704l0 320L108.8 1024l0-320L0 704l0-64 300.8 0L300.8 704z" p-id="2029"></path><path d="M832 889.6 832 1024l-83.2 0 0-384 134.4 0c96 0 140.8 38.4 140.8 121.6 0 38.4-12.8 70.4-44.8 96-32 25.6-64 32-108.8 32L832 889.6zM832 704l0 121.6 38.4 0c51.2 0 70.4-19.2 70.4-64 0-38.4-25.6-64-70.4-64L832 697.6z" p-id="2030"></path><path d="M870.4 320 806.4 256 768 339.2 838.4 409.6Z" p-id="2031"></path><path d="M364.8 115.2 294.4 185.6 326.4 268.8 396.8 198.4Z" p-id="2032"></path><path d="M640 204.8 704 275.2 742.4 185.6 672 121.6Z" p-id="2033"></path><path d="M460.8 134.4 512 83.2l6.4 0L576 140.8l32-83.2L576 25.6C556.8 6.4 537.6 0 512 0c0 0 0 0 0 0-25.6 0-44.8 6.4-64 25.6L428.8 51.2 460.8 134.4z" p-id="2034"></path><path d="M992 441.6 934.4 384l-32 83.2 32 32C940.8 512 953.6 512 960 512c12.8 0 19.2-6.4 32-12.8C1011.2 486.4 1011.2 460.8 992 441.6z" p-id="2035"></path><path d="M96 384 38.4 441.6c-19.2 19.2-19.2 44.8 0 57.6 19.2 19.2 44.8 19.2 57.6 0L128 467.2 96 384z" p-id="2036"></path><path d="M192 403.2 262.4 332.8 230.4 249.6 160 320Z" p-id="2037"></path><path d="M512 832m-192 0a3 3 0 1 0 384 0 3 3 0 1 0-384 0Z" p-id="2038"></path></svg>
            </ph-back-top>
            <ph-back-top :right="getRight(80)" :bottom="20" :circle="false">
              <svg fill="#409eff" t="1630326967670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2170" width="20" height="20"><path d="M803.049772 492.464061l-265.148869-265.335111c-6.516414-6.548136-15.031345-9.691733-23.512507-9.627265-1.146103-0.098237-2.128477-0.654916-3.27458-0.654916-4.780887 0-9.234315 1.112334-13.32754 2.947122-4.125971 1.571798-8.055466 3.962242-11.396561 7.30129L221.018789 492.258377c-12.80463 12.770861-12.836353 33.497928-0.033769 46.302559 6.384407 6.418176 14.768355 9.627265 23.185049 9.627265 8.382924 0 16.733103-3.209088 23.151279-9.561773l211.04667-210.966852 0 576.851007c0 18.108426 14.670118 32.744775 32.746822 32.744775 18.076704 0 32.746822-14.636349 32.746822-32.744775L543.861662 326.052984l212.755592 212.58163c6.386454 6.418176 14.833847 9.660011 23.216771 9.660011s16.700357-3.175319 23.085788-9.528004C815.786865 526.027481 815.820634 505.266645 803.049772 492.464061z" p-id="2171" fill=""></path><path d="M872.204805 152.237263l-720.407564 0c-18.076704 0-32.746822-14.670118-32.746822-32.746822s14.670118-32.744775 32.746822-32.744775l720.407564 0c18.108426 0 32.744775 14.670118 32.744775 32.746822S890.312208 152.237263 872.204805 152.237263z" p-id="2172"></path></svg>
            </ph-back-top>
          </ph-list-item>
        </ph-list>
        <ph-list title="demo3" flex="0 0 auto" class="demo3-list">
          <ph-list-item class="item">
            <div class="demo3">
              <div class="demo3-inner">
                这是作用于某一个元素的回到顶部，相比作用于Main区域的写法，会多一些的嵌套。
              </div>
            </div>
            <ph-back-top selector=".demo3" @complete="handleComplete"></ph-back-top>
          </ph-list-item>
        </ph-list>
        <ph-list title="demo4" flex="0 0 auto">
          <ph-list-item class="item">
            <div class="demo4">
              <div class="demo4-inner">
                距离容器一定单位后才显示回到顶部的图标
              </div>
            </div>
            <ph-back-top selector=".demo4" :offset="100"></ph-back-top>
          </ph-list-item>
        </ph-list>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicBackTop }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
    <ph-back-top></ph-back-top>
  </ph-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
  PhView,
  PhTab,
  PhTabPanel,
  PhBackTop,
  PhList,
  PhListItem
} from "@/index";
import * as Data from "../data/back-top";

export default defineComponent({
  components: {
    PhView,
    PhTab,
    PhTabPanel,
    PhBackTop,
    PhList,
    PhListItem
  },
  setup() {
    const getRight = (right: number) => {
      return window.innerWidth - 290 - right
    }

    const handleComplete = () => {
      alert('滚动事件完成！')
    }

    return {
      getRight,
      handleComplete,
      ...Data
    }
  }
})
</script>

<style lang="scss" scoped>
.item {
  transform: translate(0);
}
.demo1, .demo2 { height: 100px; }
.demo3 {
  height: 160px;
  overflow-y: auto;
  position: relative;
  &-list {
    width: 60%;
    min-width: 0;
  }
  &-inner {
    height: 500px;
  }
}
.demo4 {
  height: 120px;
  overflow-y: auto;
  position: relative;
  &-inner {
    height: 500px;
  }
}
</style>